<template>
    <div class="conceptList">
        <ul class="infoBoxChild clearfix">
            <li v-for="(item,i) in indexMsg.items[modeType]" :key="item.id" v-if="i>length-1?false:true">
                <router-link :to="toUrl+'/'+item.id">
                <div class="infoImg">
                    <img :src="item.image" alt="">
                    <div class="clearfix infoTextBox">
                        <div class="infoText">
                            <p class="vipText">{{item.title}}</p>
                            <p class="infoItemId">ID:&nbsp<span>{{item.id}}</span></p>
                        </div>
                    </div>
                    <p class="infoItemPrompt">
                        <button @click.prevent.stop="collection({e:$event,id:item.id,type:modeType})">
                            <i class="coll" :class="{'avtiveColl':isInArray(item.id)}"></i>
                            收藏
                        </button>
                        <button @click.prevent.stop="modeDownload(item.id,item.title)">
                            <i class="downloadStatus"></i>
                            下载
                        </button>
                    </p>
                </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
    export default{
        name : "modeConcept",
        props: ["length","toUrl","indexMsg","modeType"],
        data(){
            return {
                msg: "模型列表",

            }
        },
        computed: {
            ...mapState({//登录的用户信息
                user: state => state.AuthUser
            }),
            mismatchError() {
                return this.bag.has('password:auth') && !this.errors.has('password')
            },
            
            
        },
        methods:{
            errorWarning(msg) {
                this.$message({
                        message: msg,
                        type: 'error',
                        customClass : 'downLoadError',
                        duration : 2000,
                        showClose : true,
                    });
            }, 
            ...mapMutations(//mutations中的方法
                ["loginShow","loginClose","loginLoginName","registerLoginName","collection"]
            ),
            modeDownload(id,name){//模型下载
                if(this.$store.state.AuthUser.userInfo){
                    axios({
                        method: 'get',
                        url: '/downdata/'+id,
                        // responseType: 'blob'
                    }).then(response => {
                        if(response.data.status=="1"){
                            window.open(this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); 
                        }else if(response.data.status=="0"){
                            this.errorWarning('交易币不足，请充值后再进行下载...');
                        }
                        
                    }).catch((error) => {
                        this.errorWarning("下载失败");
                    }) 
                }else{
                    this.loginShow();
                }
                
            },
                // 下载文件
            download (data,name) {//下载要执行的函数
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(data)
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', name+'.zip')
                document.body.appendChild(link)
                link.click()
            },
            isInArray(value){
                var arr = null;
                if(!this.user.userInfo){
                    return
                }else{
                    if(this.modeType!="7"){
                        arr = this.user.userInfo.data.datacollects;
                        }else{
                            arr = this.user.userInfo.data.articlecollects;
                        }
                        for(var i = 0; i < arr.length; i++){
                            if(value === arr[i]){
                                return true;
                            }
                        }
                        return false;
                }
                
                }
        }
    }
</script>
<style>
@import "../css/global.css";
.coll{
    background: url(./img/coll.png) no-repeat center;
}
.infoItemPrompt button:hover .coll{
    background: url(./img/hoverColl.png) no-repeat center;
}
.downloadStatus{
    background: url(../img/indexDownload.png) no-repeat center;
}
.infoItemPrompt button:hover .downloadStatus{
    background: url(./img/hoverDownload.png) no-repeat center;
}
.avtiveColl{
    background: url(./img/hoverCollActive.png) no-repeat center;
}
.infoItemPrompt button:hover .avtiveColl{
    background: url(./img/collActiveEd.png) no-repeat center;
}
.infoItemPrompt i{
    display: inline-block;
    width: 20px;
    height: 18px;
    vertical-align:middle;
}
.conceptList .infoBoxChild li{
    height: 154px;
}
.conceptList .infoImg{
    height: 154px;

}
.conceptList .infoTextBox{
    top: 100px;
}
.conceptList .infoBoxChild li:hover .infoTextBox{
    padding-top: 80px;
}
.downLoadError{
    margin-top: 20%;
    font-size: 50px;
}

</style>

